CSS - Como colocar sombra em boxes ( divs )
Nota : Se não tiver texto na div não exibe nada.
Uma sombra sólida simples e muito destacada do box
<div class="sombra1">sombra1</div>
sombra1
Uma sombra sólida com bordas achatadas e muito destacada do box
<div class="sombra1 bordasachatadas1">sombra1 e bordasachatadas1</div>
sombra1 e bordasachatadas1
Uma sombra realmente sombreada com bordas achatadas
<div class="sombra2 bordasachatadas1">sombra2 e bordasachatadas1</div>
sombra2 e bordasachatadas1
Uma sombra realmente sombreada com bordas achatadas sendo a sombra bem maior que a imagem
<div class="sombra3 bordasachatadas1">sombra3 e bordasachatadas1</div>
sombra3 e bordasachatadas1
Uma sombra interna ao próprio elemento
<div class="sombra4 bordasachatadas1">sombra4 e bordasachatadas1</div>
sombra4 e bordasachatadas1
Estilos utilizados por esta página:
<style>
.bordasachatadas1 {
border-radius: 10px;
}
.sombra1 { /* normal */
box-shadow: 20px 20px black;
background-color: aquamarine;
width: 150px;
height: 150px;
}
.sombra2 { /* com blur*/
box-shadow: 20px 20px 20px black;
background-color: azure;
width: 150px;
height: 150px;
}
.sombra3 { /* sombra maior que a figura original*/
box-shadow: 20px 20px 20px 30px black;
background-color: azure;
width: 150px;
height: 150px;
}
.sombra4 { /* sombra interna ao elemento*/
box-shadow: inset 0 0 40px black;
background-color: azure;
width: 150px;
height: 150px;
}
</style>